<template>
  <div>

  <header class="mod-header">
    <div class="mod-user">
      <div class="head-portrait">
        <img src="//s1.bbgstatic.com/gshop/images/my-center/user.png">
      </div>
      <div class="personal-msg">大都督</div>
      <div class="user-level">
        <router-link to="/">
          <img class="user-ico" src="../../assets/join.png">
          <span class="user-name">加入VIP</span>
        </router-link>
        <router-link to="/">
          <img class="user-ico" src="../../assets/fx.png">
          <span class="user-name">加入分销</span>
        </router-link>
      </div>
    </div>
  </header>
  <div class="user-body">
    <div class="user-order">
        <div class="my-title">
            <span class="order-tips">我的订单</span>
            <a href="/orderList" class="see-order">查看全部订单<i class="icon iconfont icon-more"></i></a>
        </div>
        <div class="mod-order">
            <a href="/orderList?#1" class="order-box">
                <i class="icon iconfont icon-manageorder" ></i>
                <span>待付款</span>
                            </a>
            <a href="/orderList?#2" class="order-box">
                <i class="icon iconfont icon-auto"></i>
                <span>待发货</span>
                            </a>
            <a href="/orderList?#3" class="order-box">
                <i class="icon iconfont icon-gifts"></i>
                <span>待收货</span>
                            </a>
            <a href="/logistics" class="order-box">
                <i class="icon iconfont icon-templatedefault"></i>
                <span>物流查询</span>
            </a>
        </div>
    </div>
    <div class="user-list">
      <div class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-account"></i>蚂蚁经纪人</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </div>
      <ul>
        <a href="/member/orders?#1" class="user-box">
                <i class="icon iconfont icon-qrcode" ></i>
                <span>店铺二维码</span>
                            </a>
            <a href="/member/orders?#2" class="user-box">
                <i class="icon iconfont icon-jewelry"></i>
                <span>产品利润</span>
                            </a>
            <a href="/member/orders?#3" class="user-box">
                <i class="icon iconfont icon-qrcode"></i>
                <span>授权二维码</span>
                            </a>
                            <a href="/member/orders?#3" class="user-box">
                <i class="icon iconfont icon-jifen"></i>
                <span>拓展奖励</span>
                            </a>
      </ul>
      <router-link to="/" class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-information"></i>关于我们</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </router-link>
        <router-link to="/setting" class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-set"></i>设置中心</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </router-link>
        <router-link to="/" class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-service"></i>帮助与客服</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </router-link>
        <router-link to="/" class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-training"></i>操作手册</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </router-link>
        
    </div>
  </div>

    <foot-guide></foot-guide>
  </div>
</template>
<script>
import footGuide from '@/components/footer.vue'
export default {
  name: 'index',
  components: {
    footGuide
  },
  data () {
    return {
    }
  },
  methods: {
    goLogin () {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss">
.user-body{padding-bottom: 2rem; background: #fff;}
.mod-header {
  height: 9.6rem;
  background-color: #fcf3e2;
  background-image: url('../../assets/user-bg.jpg');
  background-size: 100% 100%;
  position: relative;
  .ui-header {
    height: 1.7rem;
    line-height: 1.7rem;
    background-color: transparent;
    border: none;
  }
  .mod-user {
    padding-top: 1.7rem;
    text-align: center;
    .head-portrait {
      border: .2rem solid #dadada;
      width: 4.26rem;
      height: 4.26rem;
      margin: 0 auto;
      border-radius: 100%;
      img{
      width: 100%;
      box-shadow: 0px 0px 3px #000;
      border-radius: 100%;
      
      }
      
    }
    .personal-msg {
      font-size: .6rem;
      color: #333;
      text-align: center;
      font-weight: bold;
      margin: .24rem auto .21333rem;
    }
    .user-level {
      position: absolute;
      right: 0;
      bottom: 0rem;
      text-align: left;
      a{
        background: rgba(0 ,0,0, .8);
        padding-left: .5rem;
        border-top-left-radius: 1.067rem;
        border-bottom-left-radius: 1.067rem;
        width: 4.27rem;
        height: 1.067rem;
        display: block;
        box-sizing: border-box;
        line-height: 1.067rem;
        margin-bottom: .6rem;
        font-size: .512rem;
    color: #fff;
     .user-ico {
    width: .8rem;
    margin-right: .21333rem;
}
      }
    }
  }
}
    .my-title {
    display: flex;
    height: 1.70667rem;
    line-height: 1.70667rem;
    border-bottom: 1px solid #f6f6f6;
    background-color: #fefefe;
    .order-tips {
      flex: 1;
    font-size: .59733rem;
    text-align: left;
    padding-left: .6rem;
    color: #333;
    font-weight: 200;
    i{
      margin-right: .2rem;
    font-size: .7rem;
    }
}
.see-order {
  flex: 1;
    font-size: .46933rem;
    text-align: right;
    padding-right: .81067rem;
    color: #999;
    font-weight: 200;
}
}
.user-order {
    background-color: #fff;
.mod-order {
    display: flex;
    .order-box {
    display: block;
    flex: 1;
    text-align: center;
    justify-content: center;
    padding-top: .64rem;
    width: 100%;
    line-height: .64rem;
    position: relative;
    i{display: block; margin:.1rem auto;}
    span {
    font-size: .42667rem;
    color: #999;
    font-weight: 200;
}
}
}
}
.user-list {
  margin-top: .5rem;
    border-top: #f5f5f5 solid .5rem;
    ul{
      padding: .5rem 0;
      display: flex;
      .user-box{
        text-align: center;
        font-size: .4rem;
        flex: 1;
        i{
          margin: .5rem auto;
          display: block;
        }
      }
    }
}
</style>

